<template>
    <div class="chart-table"  id="tableList" ref="table">
        <table class="view-table" cellspacing="0" cellpadding="0" border="0" :style="{'textAlign': graphOptions.others && graphOptions.others.align }" :class="{'no-border': graphOptions.others && !graphOptions.others.border}" >
            <thead>
                <tr>
                    <th v-for="(item,index) in heads" :key="index" :style="{'color': item.color, 'borderColor': item.borderColor}"><div class="table-cell">{{item.name}}</div></th>
                </tr>
            </thead>
            <tbody class="table-tbody" ref="tbody" id="tbody">
                <tr class="table-row" v-for="(item,index) in tableList" :key="index">
                    <td class="table-column" v-for="(it,tindex) in heads" :key="tindex" :style="{'color': it.color, 'borderColor': it.borderColor}"><div class="table-cell">{{item['key_'+tindex]}}</div> </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import util from 'util'
import html2canvas from 'html2canvas'
export default {
    props: {
        tablist: {
            type: Array
        },
        tableColumn:{},
        graphOptions: {
          type: Object,
          default: function() {
            return {}
          }
        },
    },
    data(){
        return {
            heads:[],
            tableList:[],
            heart: 100,
            now: 0,
            siv: ''
        }
    },
    watch:{
        tablist: {
            deep: true,
            handler (value) {
                this.init(value);
            }
        },
        graphOptions: {
          deep: true,
          handler (value) {
            if (value.others && value.others.tableAttr && this.heads.length === value.others.tableAttr.length) {
              this.heads.forEach(h => {
                value.others.tableAttr.forEach(attr => {
                  if (h.name === attr.name) {
                    this.$set(h, 'color', attr.color)
                    this.$set(h, 'borderColor', value.others.borderColor)
                  }
                });
              });
              value.others.animate ? this.startAnimate() : this.stopAnimate()
            }
            if(value.backgroundColorURL){
              this.$refs.table.style.background = 'url(' + value.backgroundColorURL + ') no-repeat'
              this.$refs.table.style.backgroundSize = '100% 100%'
            } else {
              this.$refs.table.style.background = 'none'
            }
            if (value.backgroundColor) {
              this.$refs.table.style.backgroundColor = value.backgroundColor
            } else {
              this.$refs.table.style.backgroundColor = 'transparent'
            }
          }
        }
    },
    methods:{
      startAnimate() {
        let vm = this
      	vm.$nextTick(function () {
            if (!vm.siv) {
              vm.siv = setInterval(() => {
              vm.now++
              if (vm.now >= vm.heart) {
                vm.now = 0
                vm.tableList.push(vm.tableList.shift())
              }
              let trList = document.getElementById('tbody').getElementsByTagName('tr')
              for (let i = 0; i < trList.length; i++) {
                const trItem = trList[i];
                if (i === 0) {
                  if (vm.now * 2.5 > vm.heart) {
                    trItem.style.opacity = 0
                  } else {
                    trItem.style.opacity = 1- vm.now / vm.heart
                  }
                }
                trItem.style.transform = 'translateY(-' + 48 / vm.heart * vm.now + 'px)'
              }
            }, 20);
            }
          })
      },
      stopAnimate() {
        clearInterval(this.siv)
        this.siv = ''
      },
        getDataURL(){
            html2canvas(document.getElementById('tableList'),{scale:1,logging:false,useCORS:true}).then(function(canvas) {
                    var image = new Image();
                    image.src = canvas.toDataURL("image/png");
                    image.width=280;
                    image.height=220;
                    setTimeout(() => {
                        var canvas = document.createElement("canvas");
                        canvas.width = image.width;
                        canvas.height = image.height;
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(image, 0, 0, image.width, image.height);
                        return canvas.toDataURL("image/jepg");
                    }, 50);
                });
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }){
            if(columnIndex<this.tableColumn &&rowIndex<this.tableList.length-1){
                if(rowIndex>0 && rowIndex<this.tableList.length && row['key_'+columnIndex] == this.tableList[rowIndex-1]['key_'+columnIndex]    ){
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }else if(rowIndex<this.tableList.length-1 && row['key_'+columnIndex] == this.tableList[rowIndex+1]['key_'+columnIndex]){
                    var index =0;
                    for(var i =rowIndex;i<this.tableList.length-1;i++){
                        if(row['key_'+columnIndex] ==this.tableList[i]['key_'+columnIndex]){
                            index++;
                        }else{
                            break;
                        }
                    }
                    return {
                        rowspan:index,
                        colspan:1
                    }
                }
            }

        },
        init(value){
          let vm = this
            var list =util.util.cloneObj(value);
            vm.heads = []
            if (!Array.isArray(list[0])) {
              return
            }
            for (let i = 0; i < list[0].length; i++) {
              vm.heads.push({name: list[0][i]})
            }
            list.splice(0,1);
            var arr=[];
            for(var j = 0;j<list.length;j++){
                var it  =list[j];
                var item={};
                for(var i =0;i<it.length;i++){
                    item['key_'+i]=it[i];
                }
                arr.push(item);
            }
            vm.tableList =arr;
        }
    },
    mounted(){
        this.init(this.tablist);
    },
    beforeDestroy () {
      this.stopAnimate()
    }
}
</script>
<style lang="less">
.chart-table{
    height: 100%;
    padding: 12px;
    overflow-y: auto;
}
.view-table{
  &.no-border {
    th, td {
      border-bottom: none;
    }
  }
  .table-tbody {
    overflow: hidden;
  }
    width: 100%;
    text-align: left;
    th,td{
        min-width: 0;
        height: 48px;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        border-bottom: 1px solid #e8eaec;
    }
    thead{
        th{
            white-space: nowrap;
            overflow: hidden;
            // background-color: #f8f8f9;
        }
    }
    tbody{
        td{
            // background-color: #fff;
            transition: background-color .2s ease-in-out;
        }
        tr:hover{
            td{
                // background: #ebf7ff;
            }
        }

    }
    .table-cell{
        display: inline-block;
        word-wrap: normal;
        vertical-align: middle;
        padding-left: 18px;
        padding-right: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        box-sizing: border-box;
    }
}
</style>


